<template>
  <div class="layout">
    <!--header菜单 -->
    <div class="layout_header">
      <Navbar />
    </div>
    <!--显示body -->
    <div class="layout_body">
      <div class="layout_body_content">
        <div class="layout_body_content_bread">
          <!-- <NavBread @change="change" /> -->
        </div>
        <div class="layout_body_content_wrapper">
          <transition
            mode="out-in"
            name="fade"
          >
            <keep-alive>
              <router-view />
            </keep-alive>
          </transition>
        </div> 
      </div>
    </div>
    <!--footer -->
    <div class="layout_footer">
      <p>版权信息©2020江苏金智教育信息股份有限公司苏ICP备10204514号</p>
    </div>
  </div>
</template>
<script>
import Navbar from '@components/base/layout/nav-bar'
export default {
  name: 'Main',
  components: {
    Navbar
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  mounted() {},
  methods: {}

}
</script>
<style lang="stylus" scoped>
.layout{
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: $grey-v1;
  position: relative;
   &_header {
    display: flex;
    align-items: center;
    >>>.ivu-menu {
      flex: 1;
    }
  }

  &_body{
    height: 100%;
    width:100%;
    max-height :calc(100vh - 91px)
    &_content {
      height: 100%;
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      padding: 0 40px;
      &_bread {
        background :transparent;
        line-height: 20px;
        height: 20px;
      }

      &_wrapper {
        flex: 1;
        overflow: auto;
        min-width: 1050px;
        height: 100%;
        background: #fff;
      }
    }
  }

  &_footer {
    line-height: 35px
    text-align: center
    p {
      font-size: 12px;
      color: #515a6ee0
    }
  }
}
</style>
